<template>
	<view class="goodsDetails">
		<view class="goodsDetails-swiper">
			<u-swiper :list="swiperLists" height="665" mode="none" :current="current" @change="changeSwiper"></u-swiper>
			<view class="dot">
				<text class="current">{{current + 1}}</text>
				<text class="total">{{swiperLists.length || 0}}</text>
			</view>
		</view>
		<view class="goodsDetails-info">
			<view class="details">
				<block v-if="isVip">
					<view class="left">
						<view class="price">
							<text class="icon">￥</text>
							<text class="num">{{info.reduce_rmb}}</text>
						</view>
						<view class="tag" v-if="info.flag_text && info.flag_text != '不显示'">{{info.flag_text}}</view>
						<view class="price old">
							<text class="num">￥{{info.price}}</text>
						</view>
						<!-- <view class="tag">{{isVip ? 'VIP价' : '会员价'}}</view> -->
					</view>
				</block>
				<block v-else>
					<view class="left">
						<view class="price">
							<text class="icon">￥</text>
							<text class="num">{{info.reduce_rmb}}</text>
						</view>
						<!-- <view class="tag">{{isVip ? 'VIP价' : '会员价'}}</view> -->
						<view class="tag" v-if="info.flag_text && info.flag_text != '不显示'">{{info.flag_text}}</view>
						<view class="price old">
							<view class="num"><text class="icon">￥</text>{{info.price}}</view>
							<view class="hint">(会员价)</view>
						</view>
					</view>
				</block>
				<view class="vip-price">
					<block v-if="isVip">
						<!-- <view class="pay-hint" v-if="!userInfo.is_partner == 1">
							<view class="hint">您已是终身VIP会员</view>
						</view> -->
						<view class="pay-hint">
							<text>SVIP预估可节省</text>
							<text class="price">{{vipPrice}}</text>
						</view>
					</block>
					<view class="pay-hint" v-else>
						<text class="link" @click="openVip(2)">升级SVIP</text>
						<text>此单可节省</text>
						<text class="icon">￥</text>
						<text class="price">{{vipPrice}}</text>
					</view>
					<!-- <text>{{isVip ? '本单已为你节省' : 'VIP会员购买再省'}}</text><text class="icon">￥</text><text
						class="price">{{vipPrice}}</text> -->
				</view>
				<!-- <view class="details-storage"> 库存：{{ info.stock_num }}件 </view> -->
			</view>
			<view class="title">
				<view class="tag">自营</view>
				<view class="tag" style="margin-right: 15rpx;" v-if="info.third_flag">{{info.third_flag | sourceName}}
				</view>
				<text style="font-weight: bold;">{{ info.name }}</text>
			</view>
			<view class="list">
				<view class="item">
					<view class="dot"></view>保证正品
				</view>
				<view class="item">
					<view class="dot"></view>专业鉴定
				</view>
				<view class="item">
					<view class="dot"></view>奢品养护
				</view>
				<view class="item">
					<view class="dot"></view>专属客服<u-icon name="arrow-right" style="margin-left: 20rpx;"></u-icon>
				</view>
			</view>
		</view>
		<view class="box info">
			<view class="item" @click="buyNow">
				<text class="label">选择</text>
				<view class="right">
					<view class="specs" v-if="info.is_specs">
						<text>{{info.specs_one.specs_one}}</text>
						<text>{{info.specs_two.specs_two}}</text>
					</view>
					<view class="specs" v-else>
						<text>{{info.specs_one}}</text>
						<text>{{info.specs_two}}</text>
					</view>
					<u-icon name="arrow-right" size="24" color='#333333' style="margin-left: 30rpx;" />
				</view>
			</view>
			<view class="item">
				<text class="label">配送</text>
				<text class="right">{{info.delivery}}</text>
			</view>
		</view>
		<view class="goodsDetails-details box">
			<view class="header">
				<view class="line"></view>
				<text>详情</text>
			</view>
			<template v-if="info.content">
				<rich-text :nodes="info.content | formatRichText"> </rich-text>
			</template>
			<my-image src="/shsm.jpg" width="100%" mode="widthFix" height="auto"></my-image>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="goodsDetails-oper">
			<view class="service little">
				<image mode="aspectFit" class="icon" :src="`${STATIC_URL}/kf.png`" />
				<view class="text"> 客服 </view>
				<button class="kfBtn" open-type="contact" @contact="msgContact"></button>
			</view>
			<view class="car little" @click.stop="bagNavigate">
				<image mode="aspectFit" class="icon" :src="`${STATIC_URL}bag-ed.png`" />
				<view class="text"> 购物袋 </view>
			</view>

			<view class="btns" style="width: 524rpx;">
				<view class="btns-item add" @click.stop="addBag" v-if="info.category_id != 27"> 加入购物袋 </view>
				<view style="width: 50%" v-else></view>
				<view class="btns-item buy" @click.stop="buyNow"> 立即购买 </view>
			</view>
		</view>
		<view class="goodsDetails-share" @click="shareTest">
			<image class="icon" mode="aspectFill" :src="`${STATIC_URL}share1.png`">
			</image>
		</view>

		<!-- 分享 -->
		<u-mask :show="maskShow" @click="maskShow = false" @touchmove.stop.prevent="moveHandle">
			<view class="share" @touchmove.stop.prevent="moveHandle">
				<!-- <canvas canvas-id="sharePane"> -->
				<view class="share-content" @tap.stop>
					<!-- <image mode="aspectFill" :src="info.image" class="cover" />
					<view class="info">
						<view class="info-title">
							{{ info.name }}
						</view>
						<view class="info-bottom">
							<view class="price">
								<view class="vip"><text class="price-tag">¥</text>{{ info.reduce_rmb }} </view>
								<view class="normal"><text class="price-tag">¥</text>{{ info.price }} </view>
							</view>
							<image class="code" :src="code" mode="aspectFit"> </image>
						</view>
					</view>
					<view class="tips">
						美国奥特莱斯官方授权，诚邀市县城市独家加盟！<br />
						线下门店：成都市高新区招商大魔方B馆二楼
					</view> -->
					<lPainter :class="{'hide': !maskShow}" isBase64ToPath isRenderImage :board="board" :sleep="1"
						@success="poster = $event" @fail="fail" @done="drawDone" :type="1"></lPainter>
					<view class="oper">
						<button class="btn share" open-type="share">分享链接</button>
						<view class="btn save" @click="savePhoto"> 保存图片 </view>
					</view>
				</view>
				<!-- </canvas> -->
			</view>
		</u-mask>
		<!-- 规则选择 -->
		<u-popup mode="bottom" v-model="popShow">
			<view class="attribute">
				<view class="attribute-price"> ¥ {{ curPrice }} </view>
				<view class="attribute-part">
					<view class="title"> 选择{{ info.specs_one.specs_one }} </view>
					<view class="bd">
						<template v-for="item in info.specs_one.colour">
							<view class="bd-item" :key="item.id">
								<!-- <image class="cover" src="/static/logo.png" mode="aspectFill" /> -->
								<view class="text" :class="[item.id == choseAttrOne ? 'text-active' : '']"
									@click="attrOneChose(item.id)">
									{{ item.name }}
								</view>
							</view>
						</template>
					</view>
				</view>
				<view class="attribute-part" v-if="info.specs_two.specs_two">
					<view class="title"> 选择{{ info.specs_two.specs_two }} </view>
					<view class="bd">
						<block v-for="item in subAttr">
							<view class="bd-item size" :class="[item.id == choseAttrTwo ? 'text-active' : '']"
								@click="attrTwoChose(item.id)" :key="item.id">
								{{ item.size }}
							</view>
						</block>
					</view>
				</view>
				<view class="attribute-num" v-if="!vipType">
					<view class="title"> 数量 </view>
					<view class="oper">
						<u-number-box v-model="choseNum" :min="1" :max="numMax || 1"></u-number-box>
					</view>
				</view>
				<view class="btns" :class="[popType ? 'btns-bag' : 'btns-buy']" @click="paneOper">
					{{ popType ? "确定购买" : "加入购物袋" }}
				</view>
			</view>
		</u-popup>
		<!-- 保存图片的canvas -->
		<view class="hideCanvasView" v-if="showCanvas">
			<canvas class="hideCanvas" canvas-id="sharePane" :style="{
          width: (poster.width || 10) + 'px',
          height: (poster.height || 10) + 'px',
        }"></canvas>
		</view>
		<!-- <lPainter :custom-style="'position:absolute;left:-9999rpx;top:-9999rpx'" isBase64ToPath isRenderImage
			:board="board" :sleep="1" @success="poster = $event" @fail="fail" @done="drawDone" :type="1"></lPainter> -->
	</view>
</template>
<script>
	import {
		loginPrefix
	} from "@/utils/permission";
	import {
		goodsDetail,
		shoppingCarAdd,
		QRCode,
		shareLevel
	} from "@/utils/api";
	import {
		getSharePoster
	} from "@/components/QS-SharePoster/QS-SharePoster.js";
	import _app from "@/components/QS-SharePoster/app.js";
	import {
		mapActions,
		mapGetters
	} from "vuex";
	import lPainter from "@/components/painter/index";
	export default {
		data() {
			return {
				code: "",
				targetPrice: "",
				// poster: {},
				id: 0,
				info: {},
				popType: 1, // 1-确定购买 0-加入购物袋
				maskShow: false,
				popShow: false,
				swiperLists: [],
				// subAttr:[],// 副级属性
				choseAttrOne: "", // 选择的第一个属性
				choseAttrTwo: "",
				choseNum: 1, // 选择的数量
				choseSize: [], // 选择的规格
				// 绘制的图片
				board: {
					// width: "650rpx",
					// height: "900rpx",
					// background: "#F6F7FB",
					// views: [],
				},
				poster: "",
				current: 0,
				showCanvas: false
			};
		},
		components: {
			lPainter,
		},
		computed: {
			...mapGetters(["userInfo", "remomandGoods", "vipType", 'isVip']),
			subAttr() {
				if (this.info.specs_two && Object.keys(this.info.specs_two).length != 0) {
					return this.info.specs_two.stock
					return this.info.specs_two.stock.filter(
						(item) => item.colour_id == this.choseAttrOne
					);
				}
			},
			vipPrice() {
				if (this.info) {
					// let price = this.isVip ? this.info.original : this.info.price
					let price = this.info.price
					price = parseFloat(price)
					let reduce_rmb = parseFloat(this.info.reduce_rmb)
					return (price - reduce_rmb).toFixed(2)
				} else {
					return 0
				}
			},
			curPrice() {
				if (this.info.specs_two && this.choseAttrOne) {
					var arrSuitOne = this.info.specs_two.stock.filter(
						(item) => item.colour_id == this.choseAttrOne
					);
					var arrSuitTwo = arrSuitOne.filter(
						(item) => item.id == this.choseAttrTwo
					);
					// 有两个属性
					if (this.info.specs_two.specs_two) {
						if (this.choseAttrTwo) {
							this.targetPrice = !this.isVip ?
								arrSuitTwo[0].price :
								arrSuitTwo[0].reduce_rmb;
							return this.targetPrice;
						} else {
							if (arrSuitOne.length == 1 && !arrSuitOne[0].name) {
								this.targetPrice = !this.isVip ?
									arrSuitOne[0].price :
									arrSuitOne[0].reduce_rmb;
								return this.targetPrice;
							} else {
								return "-";
							}
						}
					} // 只有一个属性
					else {
						this.targetPrice = !this.isVip ?
							arrSuitOne[0].price :
							arrSuitOne[0].reduce_rmb;
						// arrSuitOne[0].original;
						return this.targetPrice;
					}
				}
			},
			numMax() {
				if (!this.info.is_specs) {
					return this.info.stock_num
				}
				if (this.info.specs_two) {
					let attrOneSuit = this.info.specs_two.stock.filter(
						(item) => item.colour_id == this.choseAttrOne
					);
					// 有两个属性
					if (this.choseAttrOne && this.choseAttrTwo) {
						let attrTwoSuit = attrOneSuit.filter(
							(item) => item.id == this.choseAttrTwo
						);
						// console.log("有两个属性", attrTwoSuit);
						return attrTwoSuit[0].stock_num;
					} else {
						// 只有一个属性
						// console.log("只有一个属性", attrOneSuit);
						return attrOneSuit[0].stock_num;
					}
				}
			},
		},
		filters: {
			sourceName(val) {
				let str = ''
				switch (val) {
					case 1:
						str = '店'
						break
					case 2:
						str = '仓'
				}
				return str
			},
			formatRichText(html) {
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match
						.replace(/style="[^"]+"/gi, "")
						.replace(/style='[^']+'/gi, "");
					match = match
						.replace(/width="[^"]+"/gi, "")
						.replace(/width='[^']+'/gi, "");
					match = match
						.replace(/height="[^"]+"/gi, "")
						.replace(/height='[^']+'/gi, "");
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(
					match,
					capture
				) {
					match = match
						.replace(/width:[^;]+;/gi, "max-width:100%;")
						.replace(/width:[^;]+;/gi, "max-width:100%;");
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, "");
				newContent = newContent.replace(
					/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
				);
				return newContent;
			},
		},
		watch: {
			poster: {
				handler(newVal, oldVal) {
					if (!newVal) {
						uni.showLoading();
					} else {
						uni.hideLoading();
					}
				},
				immediate: true,
			},
		},

		onLoad(options) {
			console.log("商品详情options", options);
			this.id = options.id;
			this.initInfo();
			// 分享给好友
			wx.showShareMenu({
				withShareTicket: true,
			});

			if (options.recommandId && options.id) {
				this.saveShareId(options.recommandId).then(() => {
					if (uni.getStorageSync("token")) {
						console.log("有token ，设置推荐人id,绑定上下级===");
						shareLevel({
							id: options.recommandId,
						}).then((resp) => {
							console.log("用户上下级绑定", resp);
						});
					}
					this.saveRecomandGoods({
						goodsId: options.id,
						recommandId: options.recommandId,
					});
					console.log("设置recomandGoods", this.remomandGoods);
				});
			}
		},
		/* 转发*/
		onShareAppMessage: function(ops) {
			var that = this;
			console.log("转发的ops", ops);
			if (ops.from === "button") {
				// 来自页面内转发按钮
				console.log("ops.target", ops.target);
				return {
					title: this.info.name, // 分享名称
					path: "pages/goodsDetails/goodsDetails?id=" +
						this.info.id +
						"&&recommandId=" +
						that.userInfo.id, // 点击分享后的链接要来到的页面的路径已经对应需要的参数
					imageUrl: this.info.image,
					success: function(res) {
						// 分享成功之后的操作
						console.log("分享成功:" + JSON.stringify(res));
					},
					fail: function(res) {
						// 分享失败之后的操作
						console.log("分享失败:" + JSON.stringify(res));
					},
				};
			}
		},
		onShareTimeline() {
			var that = this;
			console.log("转发的ops", ops);
			if (ops.from === "button") {
				// 来自页面内转发按钮
				console.log("ops.target", ops.target);
				return {
					title: this.info.name, // 分享名称
					path: "pages/goodsDetails/goodsDetails?id=" +
						this.info.id +
						"&&recommandId=" +
						that.userInfo.id, // 点击分享后的链接要来到的页面的路径已经对应需要的参数
					imageUrl: this.info.image,
					success: function(res) {
						// 分享成功之后的操作
						console.log("分享成功:" + JSON.stringify(res));
					},
					fail: function(res) {
						// 分享失败之后的操作
						console.log("分享失败:" + JSON.stringify(res));
					},
				};
			}
		},
		onReady() {
			// uni
			//   .createSelectorQuery()
			//   .select("#goodsName")
			//   .boundingClientRect(function (e) {
			//     console.log("商品名称", e);
			//   })
			//   .exec();
		},
		methods: {
			drawDone() {
				console.log("绘制完成===");
				uni.hideLoading();
			},
			// 禁止弹窗滚动
			moveHandle: function() {
				return false;
			},
			fail(v) {
				console.log(v);
			},
			checkStock() {
				let flag = this.info.stock_num > 0
				if (!flag) {
					this.$utils.toast('商品补货中')
				}
				return flag
			},
			...mapActions(["saveGoodsTemporary", "saveRecomandGoods", "saveShareId"]),
			changeSwiper(index) {
				this.current = index
			},
			// 设置弹出层
			setInfo() {
				var that = this;
				console.log(this.info.image);
				this.board = {
					width: "650rpx",
					height: "900rpx",
					background: "#FFF",
					views: [{
							type: "image",
							src: this.info.image,
							mode: "aspectFit",
							css: {
								left: "0rpx",
								top: "0rpx",
								width: "650rpx",
								height: "550rpx",
								radius: "16rpx 16rpx 0 0",
								background: '#FFF'
							},
						},
						{
							type: "view", // info
							css: {
								top: "570rpx",
								left: "20rpx",
							},
							views: [{
									type: "view",
									css: {
										width: "460rpx",
									},
									views: [{
											type: "text",
											text: this.info.name,
											css: {
												fontSize: "26rpx",
												maxLines: 2,
											},
										},
										{
											type: "view",

											views: [{
													type: "text",
													text: "¥" + this.info.reduce_rmb,
													css: {
														color: "#cd8544",
														fontWeight: 'bold',
														fontSize: "40rpx",
													},
												},
												{
													type: "text",
													text: "¥" + this.info.price,
													css: {
														fontSize: "28rpx",
														color: '#c8c8c8',
														textDecoration: "line-through",
														marginLeft: '20rpx',
														marginTop: '8rpx'
													},
												},
											],
										},
									],
								},
								{
									type: "image",
									src: this.code,
									mode: "aspectFit",
									css: {
										width: "150rpx",
										height: "150rpx",
										right: "0rpx",
										top: "570rpx",
									},
								},
							],
						},
						{
							type: "view",
							css: {
								top: "740rpx",
								left: "20rpx",
								width: "610rpx",
								borderTop: "0.5px solid #1b1919",
								borderBottom: "0.5px solid #1b1919",
							},
							views: [{
									type: "text",
									// text: " 美国奥特莱斯官方授权！中国首家奢侈品分享经济平台！",
									text: "美国奥特莱斯官方授权！ 奢侈品一件也批发 ！",
									css: {
										fontSize: "24rpx",
										width: "520rpx",
										lineHeight: "45rpx",
									},
								},
								{
									type: "text",
									text: "线下门店：成都市高新区招商大魔方B馆二楼",
									css: {
										fontSize: "24rpx",
										width: "520rpx",
										lineHeight: "45rpx",
									},
								},
							],
						},
					],
				};
			},
			initInfo() {
				goodsDetail({
					id: this.id
				}).then((resp) => {
					console.log("商品信息", resp);
					if (resp.code == 200) {
						this.info = resp.data;

						if (resp.data.is_specs) {
							// 设置默认属性一
							this.choseAttrOne = this.info.specs_one.colour[0].id;
							// 设置默认属性二
							if (Object.keys(this.info.specs_two).length != 0) {
								let arr = this.info.specs_two.stock.filter(
									(item) => item.colour_id == this.choseAttrOne
								);
								console.log("默认属性二数组", arr);
								// this.choseAttrTwo = arr[0].id;
							}
						}
						this.getCodeImg(() => {
							this.setInfo();
						});

						// 设置轮播图
						let arr = resp.data.images.split(",");
						this.swiperLists = [];
						for (let i = 0; i < arr.length; i++) {
							this.swiperLists.push({
								image: arr[i],
							});
						}
					}
				});
			},
			// 选择第一个属性
			attrOneChose(oneId) {
				let pre = this.choseAttrOne;
				pre != oneId && (this.choseAttrTwo = "");
				this.choseAttrOne = oneId;
			},
			// 选择第二个属性
			attrTwoChose(twoId) {
				this.choseAttrTwo = this.choseAttrTwo == twoId ? "" : twoId;
			},
			openVip(type) {
				if (this.userInfo.id) {
					this.$Router.pushTab(`/pages/tabs/memberIntro/memberIntro?type=${type}`)
				} else {
					this.$utils.toast('请先登陆')
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/tabs/my/my"
						})
					}, 1000)
				}
			},
			// 加入购物车
			addBag() {
				// 库存检查
				if (!this.checkStock()) return
				loginPrefix().then(() => {
					this.popType = 0;
					// this.info.is_specs&&(this.popShow = true);
					if (this.info.is_specs) {
						this.popShow = true;
					} else {
						// 直接加入购物车
						shoppingCarAdd({
							goods_id: this.info.id,
							stock_id: "",
							num: 1,
						}).then((resp) => {
							if (resp.code == 200) {
								uni.showToast({
									icon: "none",
									title: resp.msg,
								});
							}
						});
					}
				});
			},
			// 立即购买
			buyNow() {
				// 库存检查
				if (!this.checkStock()) return
				let isUpdate = this.info.category_id == 27
				loginPrefix().then(() => {
					this.popType = 1;
					// this.info.is_specs&&(this.popShow = true);
					if (this.info.is_specs) {
						this.popShow = true;
					} else {
						// 直接购买
						let goodsArr = [{
							...this.info,
							id: this.info.id,
							name: this.info.name,
							cover: this.info.image, // 封面图
							// price: this.userInfo.vip ? this.info.price : this.info.original, //价格
							price: this.info.price, //价格
							// original:this.info.original,
							num: 1, // 数量
							// size: [], // 尺寸
							size: "",
							stock_id: "",
							recommandId: "",
							cost: this.info.cost,
							original: Number(this.info.original),
							reduce_rmb: this.info.reduce_rmb,
						}, ];
						console.log("this.recomandGoods", this.remomandGoods);
						if (Object.keys(this.remomandGoods).length > 0) {
							goodsArr[0].recommandId =
								this.remomandGoods.goodsId == goodsArr[0].id ?
								this.remomandGoods.recommandId :
								"";
						}
						// 升级产品不加入购物车
						this.saveGoodsTemporary(goodsArr).then(() => {
							uni.navigateTo({
								url: `/pages/orderConfirm/orderConfirm?isUpdate=${isUpdate ? 1 : 0}`,
							});
						});
					}
				});
			},
			// 弹出面板加入购物车|立即购买
			paneOper() {
				if (this.targetPrice == "-") {
					uni.showToast({
						icon: "none",
						title: "请选择" + this.info.specs_two.specs_two,
					});
				} else {
					var goodsArr = [{
						...this.info,
						id: this.info.id,
						name: this.info.name,
						cover: this.info.image, // 封面图
						price: this.info.price, //价格
						num: this.choseNum, // 数量
						// size: [], // 尺寸
						// size: {}, // 尺寸
						stock_id: "",
						size: "",
						recommandId: "",
						cost: "",
						original: this.info.original,
						reduce_rmb: this.info.reduce_rmb
					}, ];
					//
					let attrOneSuit = this.info.specs_one.colour.filter(
						(item) => item.id == this.choseAttrOne
					);
					console.log("attrOneSuit", attrOneSuit);

					if (this.choseAttrOne && this.choseAttrTwo) {
						// 两个属性
						let attrTwoSuit = this.info.specs_two.stock
							.filter((item) => item.colour_id == this.choseAttrOne)
							.filter((item) => item.id == this.choseAttrTwo);
						console.log("attrTwoSuit", attrTwoSuit);
						// goodsArr[0].size["id"] = this.choseAttrTwo;
						// goodsArr[0].size["name"] =
						//   attrOneSuit[0].name + ";" + attrTwoSuit[0].name;
						goodsArr[0].stock_id = this.choseAttrTwo;
						goodsArr[0].size = attrOneSuit[0].name + ";" + attrTwoSuit[0].name;
						goodsArr[0].cost = attrTwoSuit[0].cost;
					} else {
						// 一个属性
						let attrTwoSuit = this.info.specs_two.stock.filter(
							(item) => item.colour_id == this.choseAttrOne
						);
						console.log("只用一个属性attrTwoSuit", attrTwoSuit);
						// goodsArr[0].size["id"] = attrTwoSuit[0].id;
						// goodsArr[0].size["name"] = attrOneSuit[0].name + ";";
						goodsArr[0].stock_id = attrTwoSuit[0].id;
						goodsArr[0].size = attrOneSuit[0].name + ";";
						goodsArr[0].cost = attrOneSuit[0].cost;
					}

					// if (this.choseAttrOne && this.choseAttrTwo) {
					//   goodsArr[0].size.push(
					//     {
					//       id: this.choseAttrOne,
					//       name: this.info.specs_one.colour.filter(
					//         (item) => item.id == this.choseAttrOne
					//       )[0].name,
					//     },
					//     {
					//       id: this.choseAttrTwo,
					//       name: this.info.specs_two.stock
					//         .filter((item) => item.colour_id == this.choseAttrOne)
					//         .filter((item) => item.id == this.choseAttrTwo)[0].name,
					//     }
					//   );
					// }
					if (this.popType) {
						// 立即购买
						// 保存购买信息
						console.log("this.recomandGoods", this.remomandGoods);
						if (Object.keys(this.remomandGoods).length > 0) {
							goodsArr[0].recommandId =
								this.remomandGoods.goodsId == goodsArr[0].id ?
								this.remomandGoods.recommandId :
								"";
						}
						if (Object.keys(this.remomandGoods).length > 0) {
							goodsArr[0].recommandId =
								this.remomandGoods.goodsId == goodsArr[0].id ?
								this.remomandGoods.recommandId :
								"";
						}

						console.log("保存的信息========", goodsArr);

						this.saveGoodsTemporary(goodsArr).then(() => {
							this.popShow = false;
							this.choseAttrTwo = ""; // 面板重置
							uni.navigateTo({
								url: "/pages/orderConfirm/orderConfirm",
							});
						});
					} else {
						// 加入购物车
						shoppingCarAdd({
							goods_id: this.info.id,
							stock_id: goodsArr[0].stock_id,
							num: this.choseNum,
						}).then((resp) => {
							console.log("加入购物车", resp);
							if (resp.code == 200) {
								uni.showToast({
									icon: "none",
									title: resp.msg,
									success: () => {
										this.popShow = false;
										this.choseNum = 1;
										this.choseAttrTwo = "";
									},
								});
							}
						});
					}
				}
			},
			shareTest() {
				loginPrefix().then(() => {
					// this.setInfo();
					// uni.showLoading();
					this.maskShow = true;
				});
			},
			// 显示分享的内容
			async share() {
				var that = this;
				// loginPrefix().then(()=>{
				try {
					console.log("准备身成", new Date());
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: "testShareType",
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: "sharePane", //canvasId
						delayTimeScale: 20, //延时系数
						background: {
							width: 1080,
							height: 1920,
							backgroundColor: "#ffffff",
						},
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							return new Promise((rs, rj) => {
								rs([{
										type: "image",
										url: that.info.image,
										dx: 0,
										dy: 0,
										dWidth: 1080,
										dHeight: 735,
										mode: "aspectFill",
										// infoCallBack(imageInfo) {
										//   console.log("商品图片信息", imageInfo);
										//   let scale = (bgObj.width * 0.2) / imageInfo.height;
										//   return {
										//     dWidth: imageInfo.width * scale,
										//     dHeight: bgObj.width * 0.2,
										//   };
										// },
									},
									{
										type: "text",
										text: that.info.name,
										maxWidth: 700,
										dx: 40,
										dy: 1120,
										size: 50,
										lineFeed: {
											maxWidth: 700,
											lineHeight: 70,
											lineNum: 2,
										},
									},
									{
										type: "text",
										text: "¥" + that.info.original,
										fontWeight: "bold",
										size: 45,
										dx: 40,
										dy: 1300,
									},
									{
										type: "text",
										text: "会员价" + that.info.price,
										color: "#cd8544",
										size: 45,
										dx: 300,
										dy: 1300,
									},
									{
										type: "text",
										text: "* 全国招募：城市股东，分店加盟，商场采购，企业礼品批发",
										size: 30,
										dx: 40,
										dy: 1500,
									},
									// 绘制tips
									{
										type: "custom",
										setDraw(Context) {},
									},
								]);
							});
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						},
					});
					console.log(
						"海报身成成功, 时间:" +
						new Date() +
						"， 临时路径: " +
						d.poster.tempFilePath
					);
					this.poster.finalPath = d.poster.tempFilePath;
					this.maskShow = true;
				} catch (e) {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: JSON.stringify(e),
					});
					console.log(JSON.stringify(e));
				}

				// })
			},
			// 分享链接
			shareLink() {
				uni.share({
					href: this.info.image,
					title: this.info.name,
					summary: "分享测试",
					success: (res) => {
						console.log("success分享", JSON.stringify(res));
					},
					fail: (error) => {
						console.log("error分享", JSON.stringify(error));
					},
				});
			},
			// 保存图片
			savePhoto() {
				console.log("12121", this.poster);
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success(res) {
						uni.showToast({
							title: "已保存到相册",
							icon: "success",
							duration: 2000,
						});
					},
				});
				// uni.saveImageToPhotosAlbum({
				//   filePath: this.poster.finalPath,
				//   success(res) {
				//     uni.showToast({
				//       icon: "none",
				//       title: "保存成功",
				//     });
				//   },
				//   fail: (error) => {
				//     console.log("保存失败", error);
				//   },
				// });
			},

			// 购物袋跳转
			bagNavigate() {
				uni.switchTab({
					url: "/pages/tabs/bag/bag",
				});
			},
			// 客服消息
			msgContact() {
				console.log(12312);
			},
			// // 接收renderjs发回的数据
			// receiveRenderData(val) {
			//   // this.base64 = val
			//   console.log("身成的图片", val);
			// },
			// 获取二维码图片
			getCodeImg(callback) {
				QRCode({
					id: this.info.id,
				}).then((resp) => {
					console.log("二维码图片信息", resp);
					if (resp.code == 200) {
						this.code = resp.data;
						callback();
					}
				});
			},
		},
	};
</script>

// renderScript 只支持app-vue和h5 //
<script module="renderScript" lang="renderjs">
	// import html2canvas from "html2canvas";
	// export default {
	//   data(){
	//     return{
	//     }
	//   },
	//   methods:{
	//     savePhoto(e, ownerVm){
	//       console.log(1231232)
	//       const dom = document.getElementById('sharePane')
	// 				html2canvas(dom, {
	// 					width: dom.clientWidth, //dom 原始宽度
	// 					height: dom.clientHeight,
	// 					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
	// 					scrollX: 0,
	// 					useCORS: true, //支持跨域，但好像没什么用
	// 				}).then((canvas) => {
	// 					// 将身产的canvas转为base64图片3
	// 					ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
	// 				});

	//     }

	//   }

	// }
	//
</script>

<style lang="scss" scoped>
	@import './index';
</style>